<template>
  <div class="cashOutRecord">
    <header-bar title="提现记录"></header-bar>
    <pull-refresh
      :bottom="panelBottom"
      ref="pullRefreshPanel"
      id="cashOutRecord"
      :background-color="'#fff'"
      :top="headerHeight"
      :enableRefresh="true"
      @refresh="refreshData"
    >
        <div class="no_data_block" v-if="listData.length == 0 &&!isLoading">
          <no-data-panel :tipsData="tipsData"></no-data-panel>
        </div>
        <ul class="fund-items" v-if="listData.length">
            <li v-for="(item,key) in listData" :key="key" class="px1bb">
                <div class="item-left">
                    <p>提现</p>
                    <p>{{item.gmtCreate}}</p>
                </div>
                <div class="item-right">
                    <p>{{item.amount}}</p>
                    <p :class="item.status=='FAILED'?'red':''">{{status[item.status]}}</p>
                </div>
            </li>
        </ul>
        <div>
          <infinite-load
            v-if="listData.length > 0"
            :scroll-target="scrollTarget"
            :is-loading="isLoading"
            :tipsShow="tipsShow"
            :is-nomore="isNomre"
            @load="getNextData"
          ></infinite-load>
        </div>
    </pull-refresh>
  </div>
</template>

<script>
import HeaderBar from 'components/header.vue'
import { mapState, mapActions } from 'vuex'
import PullRefresh from "@/components/pullRefresh.vue";
import infiniteLoad from "@/components/infiniteLoad.vue";
export default {
    components: {
        HeaderBar,
        PullRefresh,
        infiniteLoad,
    },
    computed: mapState({
        headerHeight: state => state.headerHeight
    }),
    data() {
        return {
            listData: [],
            panelBottom: 0,
            scrollTarget: "#cashOutRecord",
            isLoading: false,
            isNomre: false,
            tipsShow: true,
            page:{
                size:10,
                current:1,
            },
            status:{
                "FAILED":"提现失败",
                "SUCCESS":"提现成功",
                "PROCESS":"提现中",
            },
            tipsData:{
                img:require('@/assets/imgs/common/no_cashout.png'),
                text:'暂无提现记录'
            },
        }
    },
    created() {
        this.toggleLoading({flag:true});
        this.getExtractHis(()=>{
            this.toggleLoading({flag:false});
        });
    },
    methods: {
        ...mapActions(["showModal", "showMsg", 'toggleLoading']),
        getExtractHis(done){
            this.$ajax.extractHis({page:this.page}).then(res=>{
                if(done){
                    done();
                }
                if(res.code=='0000'){
                    
                    if(this.page.current==1){
                        this.listData = res.data.records;
                    }else{
                        this.listData = this.listData.concat(res.data.records);
                    }
                    if(res.data.records.length!=10){
                        this.isNomre = true;
                    }
                }
            })
        },
        refreshData(done) {
            this.page.current==1;
            this.getExtractHis(done);
        },
        getNextData() {
            this.page.current++;
            this.isLoading = true;
            this.getExtractHis(()=>{
                this.isLoading = false;
            });
        }
    },
}
</script>

<style lang="less" scoped>
    .cashOutRecord{
        .no_data_block{
            padding-top: 2rem;
        }
        .fund-items{
            padding: 0 .2rem;
            &>li{
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 1.34rem;
                // border-bottom: .02rem solid #eee;
                .item-left{
                    p{
                        font-size: .28rem;
                        color: #999;
                        &:nth-child(1){
                            color: #333;
                            height: .6rem;
                        }
                    }
                }
                .item-right{
                    p{
                        font-size: .28rem;
                        color: #999;
                        text-align: right;
                        &:nth-child(1){
                            font-size: .32rem;
                            color: #333;
                            height: .6rem;
                        }
                        &.red{
                            color: #FF4137;
                        }
                    }
                }
            }
        }
    }
</style>